<template>
  <div ref="containerRef" class="container" :class="{}" v-if="artData !=0">
    <div class="item-box active-mask" v-for="(item,i) in artData" :key="i" @mouseenter="item.is_active = true"
      @mouseleave="item.is_active = false" ref="boxlist" :class="{activeShow:Boolean(item.shows)}">
      <el-image :src="item.img" fit="cover"></el-image>
      <div class="el-image mask" :class="{animationbox:Boolean(item.is_active)}" @click="see(item.details[0])">
        <div class="products-e">
          <p v-html="item.EnglishName"></p>
        </div>
        <div class="products-tag">{{item.classify}}</div>
        <div class="products-title">
          <p v-html="item.title"></p>
        </div>
      </div>
    </div>
    <el-dialog title="懒精灵色彩艺术中心" :visible.sync="dialogVisible" center v-if="artDialog.length !=0">
      <!-- <div class="dialog-theme">
        <h3>{{artDialog.title}}</h3>
        <el-image :src="artDialog.img" fil="cover"></el-image>
      </div> -->
      <div class="dialog-article" v-html="artDialog.article">
        <!-- {{}} -->
      </div>

      <span slot="footer" class="dialog-footer">
      </span>
    </el-dialog>
  </div>
</template>

<script>
import './w.css'
export default {
  props: {
    artData: {
      type: Array,
      default () {
        return []
      }
    },
    count:{
      type:Number,
      default(){
        return 0
      }
    }
  },
  data () {
    return {
      dialogVisible: false,
      counts: null,
      art: {
        count: null,
        artData: null
      },
      artDialog: {
        "id": 1,
        "title": "",
        "img": "",
        "item": "",
      },
      CardColor: "系列色卡",
      currentScroll: null,
      cardBox:null,
    }
  },
  updated () {
    this.handleScroll()
  },
  methods: {
    see (data) {
      this.artDialog = data
      console.log(data)
      // this.artDialog.cardShow = data.item[data.item.length - 1].title == this.CardColor
      this.dialogVisible = true
    },
    handleScroll () {
      this.currentScroll = window.pageYOffset
      for (let i = 0; i < this.artData.length; i++) {
        if (this.currentScroll >= this.$refs.boxlist[i].offsetTop - 600) {
          this.artData[i].shows = 1
        }
      }
    },
    handleSize(){
      // console.log(this.$refs.containerRef)
      this.$refs.containerRef.style.fridTemplateColumns =  'repeat(4,1fr)'
      if(window.innerWidth > 1200){
        console.log(2)
          this.cardBox = Math.ceil(this.count/6) *3
          this.$refs.containerRef.style.gridTemplateRows = "repeat(" + 1 + " , 210px)"
      }else if(window.innerWidth<=1200 && window.innerWidth > 768){
        this.cardBox = Math.ceil(this.count/2)
        this.$refs.containerRef.style.gridTemplateRows = "repeat(" + this.cardBox + " , 210px)"
      }else{
        console.log(1)
        this.cardBox = Math.ceil(this.count)
        this.$refs.containerRef.style.gridTemplateRows = "repeat(" + this.cardBox + " , 210px)"
      }
    },
    loadStyle(){
      let that = this
      if(window.innerWidth > 1200){
        setTimeout(function(){
          that.cardBox = Math.ceil(that.count/6) *3
            that.$refs.containerRef.style.gridTemplateRows = "repeat(" + that.cardBox + " , 210px)"
            console.log(that.$refs.containerRef)
          },500)
      }else if(window.innerWidth<=1200 && window.innerWidth > 768){
        setTimeout(function(){
          that.cardBox = Math.ceil(that.count/2)

            that.$refs.containerRef.style.gridTemplateRows = "repeat(" + that.cardBox + " , 210px)"
          },500)
      }else{
        setTimeout(function(){
          that.cardBox = Math.ceil(that.count)

            that.$refs.containerRef.style.gridTemplateRows = "repeat(" + that.cardBox + " , 210px)"
          },500)
      }
    }
  },
  mounted () {
    console.log(this.artData)
    this.loadStyle()
    window.addEventListener("scroll", this.handleScroll);
    window.addEventListener("resize",this.handleSize)
  },


}
</script>

<style lang='less' scoped>
.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(18, 210px);
  grid-auto-flow: row dense;
  overflow: hidden;
  align-items: center;
  .item-box {
    position: relative;
    cursor: pointer;
    height: 100%;
    .el-image {
      width: 100%;
      height: 100%;
    }
  }
  .item-box:nth-child(12n + 1) {
    grid-column: span 1;
    grid-row: span 1;
  }
  .item-box:nth-child(12n + 2) {
    grid-column: span 1;
    grid-row: span 1;
  }
  .item-box:nth-child(12n + 3) {
    grid-column: span 2;
    grid-row: span 2;
  }
  .item-box:nth-child(12n + 4) {
    grid-column: span 2;
    grid-row: span 2;
  }
  .item-box:nth-child(12n + 5) {
    grid-column: span 1;
    grid-row: span 1;
  }
  .item-box:nth-child(12n + 6) {
    grid-column: span 1;
    grid-row: span 1;
  }
  .item-box:nth-child(12n + 7) {
    grid-column: span 2;
    grid-row: span 2;
  }
  .item-box:nth-child(12n + 8) {
    grid-column: span 1;
    grid-row: span 1;
  }
  .item-box:nth-child(12n + 9) {
    grid-column: span 1;
    grid-row: span 1;
  }
  .item-box:nth-child(12n + 10) {
    grid-column: span 2;
    grid-row: span 2;
  }
  .item-box:nth-child(12n + 11) {
    grid-column: span 1;
    grid-row: span 1;
  }
  .item-box:nth-child(12n + 12) {
    grid-column: span 1;
    grid-row: span 1;
  }
}

.mask {
  position: absolute;
  top: 0;
  opacity: 0;
  background: transparent;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #fff;

  .products-e {
    font-size: 0.8em;
    p {
      margin-bottom: 2px;
    }
  }
  .products-tag {
    font-size: 0.8em;
  }
  .products-tag::after {
    content: "";
    display: block;
    width: 2em;
    height: 1px;
    background: #fff;
    margin: 0.6em auto 0.3em;
  }
  .products-title {
    font-size: 1.4em;
    font-weight: 520;
    p {
      margin-top: 0.5rem;
    }
  }
}

.el-dialog {
  .el-dialog__body {
    .dialog-theme {
      text-align: center;
      h3 {
        font-size: 24px;
        margin: 1rem 0;
      }
      .el-image {
        width: 100%;
        height: 338px;
      }
    }
    .dialog-item {
      text-align: center;
      color: #277457;
      .dialog-list {
        .dialog-list-title::after {
          content: "";
          display: block;
          width: 3rem;
          height: 0.15rem;
          background-color: #277457;
          margin: 1rem auto 0;
        }
      }
    }
  }
}

.active-mask {
  transform: translateY(10%);
  opacity: 0;
}
.activeShow {
  transform: translateY(0%);
  opacity: 1 !important;
  transition: all 0.9s ease;
}

@media screen and (min-width: 768px) and (max-width: 1200px) {
  .container {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(18, 267px);
    box-sizing: border-box;

    .item-box {
      position: relative;
      cursor: pointer;
      height: 100%;
      .el-image {
        width: 100%;
        height: 100%;
      }
    }
    // padding: 0 4rem;
    .item-box:nth-child(4n + 1) {
      grid-column: span 1;
      grid-row: span 1;
    }
    .item-box:nth-child(4n + 2) {
      grid-column: span 1;
      grid-row: span 1;
    }
    .item-box:nth-child(4n + 3) {
      grid-column: span 1;
      grid-row: span 1;
    }
    .item-box:nth-child(4n + 4) {
      grid-column: span 1;
      grid-row: span 1;
    }
  }
}
@media only screen and (max-width: 768px) {
  .container {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(36, 500px);
    padding: 0 20px;
  }
  .item-box {
    position: relative;
    cursor: pointer;
    height: 100%;
    grid-column: span 1 !important;
    grid-row: span 1 !important;
    .el-image {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
